<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>网站基本设置</span>
          <el-button v-test-account type="primary" @click="saveGeneralSettings">保存</el-button>
        </div>
      </template>
      <el-form 
        ref="generalForm" 
        :model="general" 
        label-width="120px" 
        :disabled="isTestAccount"
      >
        <el-form-item label="网站名称">
          <el-input v-model="general.siteName" placeholder="请输入网站名称"></el-input>
        </el-form-item>
        <el-form-item label="网站LOGO">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/upload"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
          >
            <img v-if="general.logo" :src="general.logo" class="avatar">
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="SEO标题">
          <el-input v-model="general.seoTitle" placeholder="请输入SEO标题"></el-input>
        </el-form-item>
        <el-form-item label="SEO关键词">
          <el-input v-model="general.seoKeywords" placeholder="多个关键词以逗号分隔"></el-input>
        </el-form-item>
        <el-form-item label="SEO描述">
          <el-input type="textarea" v-model="general.seoDescription" placeholder="请输入网站描述"></el-input>
        </el-form-item>
        <el-form-item label="网站版权信息">
          <el-input v-model="general.copyright" placeholder="请输入版权信息"></el-input>
        </el-form-item>
        <el-form-item label="备案信息">
          <el-input v-model="general.recordNumber" placeholder="请输入备案信息"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>联系方式设置</span>
          <el-button v-test-account type="primary" @click="saveContactSettings">保存</el-button>
        </div>
      </template>
      <el-form 
        ref="contactForm" 
        :model="contact" 
        label-width="120px"
        :disabled="isTestAccount"
      >
        <el-form-item label="联系电话">
          <el-input v-model="contact.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="contact.email" placeholder="请输入联系邮箱"></el-input>
        </el-form-item>
        <el-form-item label="QQ客服">
          <el-input v-model="contact.qq" placeholder="请输入QQ客服"></el-input>
        </el-form-item>
        <el-form-item label="微信客服">
          <el-input v-model="contact.wechat" placeholder="请输入微信客服"></el-input>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="contact.address" placeholder="请输入联系地址"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>支付设置</span>
          <el-button v-test-account type="primary" @click="savePaymentSettings">保存</el-button>
      </div>
      </template>
      <el-form 
        ref="paymentForm" 
        :model="payment" 
        label-width="120px"
        :disabled="isTestAccount"
      >
        <el-form-item label="启用微信支付">
          <el-switch v-model="payment.enableWechat" />
        </el-form-item>
        <template v-if="payment.enableWechat">
          <el-form-item label="微信AppID">
            <el-input v-model="payment.wechatAppId" placeholder="请输入微信AppID"></el-input>
          </el-form-item>
          <el-form-item label="微信商户号">
            <el-input v-model="payment.wechatMchId" placeholder="请输入微信商户号"></el-input>
          </el-form-item>
          <el-form-item label="微信API密钥">
            <el-input v-model="payment.wechatApiKey" type="password" placeholder="请输入微信API密钥"></el-input>
          </el-form-item>
        </template>

        <el-form-item label="启用支付宝">
          <el-switch v-model="payment.enableAlipay" />
        </el-form-item>
        <template v-if="payment.enableAlipay">
          <el-form-item label="支付宝AppID">
            <el-input v-model="payment.alipayAppId" placeholder="请输入支付宝AppID"></el-input>
          </el-form-item>
          <el-form-item label="支付宝私钥">
            <el-input type="textarea" :rows="4" v-model="payment.alipayPrivateKey" placeholder="请输入支付宝私钥"></el-input>
          </el-form-item>
          <el-form-item label="支付宝公钥">
            <el-input type="textarea" :rows="4" v-model="payment.alipayPublicKey" placeholder="请输入支付宝公钥"></el-input>
          </el-form-item>
        </template>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>数据字典</span>
          <el-button v-test-account type="primary" @click="saveDictionarySettings">保存</el-button>
        </div>
      </template>
      <el-table
        :data="dictionary"
        style="width: 100%"
        :border="true"
      >
        <el-table-column prop="key" label="键名" width="180"></el-table-column>
        <el-table-column prop="value" label="键值"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作" width="150" v-if="!isTestAccount">
          <template #default="scope">
            <el-button v-test-account type="primary" size="small" @click="editDictionary(scope.row)">编辑</el-button>
            <el-button v-test-account type="danger" size="small" @click="deleteDictionary(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dictionary-add" v-if="!isTestAccount">
        <el-button v-test-account type="success" @click="addDictionary">添加数据</el-button>
      </div>
    </el-card>

    <!-- 数据字典编辑对话框 -->
    <el-dialog :title="dictionaryDialogTitle" v-model="dictionaryDialogVisible" width="500px">
      <el-form
        ref="dictionaryForm"
        :model="dictionaryForm"
        :rules="dictionaryRules"
        label-width="100px"
      >
        <el-form-item label="键名" prop="key">
          <el-input v-model="dictionaryForm.key" placeholder="请输入键名"></el-input>
        </el-form-item>
        <el-form-item label="键值" prop="value">
          <el-input v-model="dictionaryForm.value" placeholder="请输入键值"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dictionaryForm.description" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dictionaryDialogVisible = false">取消</el-button>
          <el-button v-test-account type="primary" @click="submitDictionary">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const isTestAccount = computed(() => userStore.isTest)

// 基本设置
const generalForm = ref(null)
const general = reactive({
  siteName: '学法减分题库',
  logo: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  seoTitle: '学法减分题库 - 助您安全驾驶',
  seoKeywords: '交通违章,学法减分,题库,驾驶考试',
  seoDescription: '学法减分题库为您提供全面的交通法规学习和在线测试服务，帮助您规范驾驶行为，减少违章扣分。',
  copyright: '© 2023 学法减分题库 版权所有',
  recordNumber: '粤ICP备xxxxxxxx号'
})

// 联系方式设置
const contactForm = ref(null)
const contact = reactive({
  phone: '400-123-4567',
  email: 'support@example.com',
  qq: '123456789',
  wechat: 'xuefd_kefu',
  address: '广东省广州市天河区科技园'
})

// 支付设置
const paymentForm = ref(null)
const payment = reactive({
  enableWechat: true,
  wechatAppId: 'wxa1b2c3d4e5f6g7h8',
  wechatMchId: '1234567890',
  wechatApiKey: 'a1b2c3d4e5f6g7h8i9j0',
  enableAlipay: true,
  alipayAppId: '2021000000000000',
  alipayPrivateKey: '-----BEGIN RSA PRIVATE KEY-----\nMIIExxxxxxxxxxxx\n-----END RSA PRIVATE KEY-----',
  alipayPublicKey: '-----BEGIN PUBLIC KEY-----\nMIIBIxxxxxxxxxxxx\n-----END PUBLIC KEY-----'
})

// 数据字典
const dictionary = ref([
  { key: 'max_recognition_per_day', value: '10', description: '每日最大识别次数' },
  { key: 'agent_commission_rate', value: '0.3', description: '代理商默认佣金比例' },
  { key: 'vip_plan_days', value: '365', description: 'VIP套餐默认天数' },
  { key: 'customer_service_phone', value: '400-123-4567', description: '客服电话' }
])

// 数据字典编辑
const dictionaryForm = ref(null)
const dictionaryDialogVisible = ref(false)
const dictionaryDialogTitle = ref('添加数据')
const currentEditIndex = ref(-1)
const dictionaryFormData = reactive({
  key: '',
  value: '',
  description: ''
})

const dictionaryRules = {
  key: [{ required: true, message: '请输入键名', trigger: 'blur' }],
  value: [{ required: true, message: '请输入键值', trigger: 'blur' }]
}

// LOGO上传成功回调
const handleLogoSuccess = (res, file) => {
  general.logo = res.data.url
  ElMessage.success('上传成功')
}

// 保存基本设置
const saveGeneralSettings = () => {
  if (isTestAccount.value) {
    ElMessage.warning('测试账号不能进行此操作')
    return
  }
  
  // 模拟API保存
  ElMessage.success('基本设置保存成功')
}

// 保存联系方式
const saveContactSettings = () => {
  if (isTestAccount.value) {
    ElMessage.warning('测试账号不能进行此操作')
    return
}

  // 模拟API保存
  ElMessage.success('联系方式保存成功')
}

// 保存支付设置
const savePaymentSettings = () => {
  if (isTestAccount.value) {
    ElMessage.warning('测试账号不能进行此操作')
    return
  }
  
  // 模拟API保存
  ElMessage.success('支付设置保存成功')
}

// 保存数据字典
const saveDictionarySettings = () => {
  if (isTestAccount.value) {
    ElMessage.warning('测试账号不能进行此操作')
    return
}

  // 模拟API保存
  ElMessage.success('数据字典保存成功')
}

// 添加数据字典
const addDictionary = () => {
  dictionaryDialogTitle.value = '添加数据'
  dictionaryDialogVisible.value = true
  currentEditIndex.value = -1
  
  // 重置表单
  dictionaryFormData.key = ''
  dictionaryFormData.value = ''
  dictionaryFormData.description = ''
}

// 编辑数据字典
const editDictionary = (row) => {
  dictionaryDialogTitle.value = '编辑数据'
  dictionaryDialogVisible.value = true
  
  const index = dictionary.value.findIndex(item => item.key === row.key)
  currentEditIndex.value = index
  
  // 填充表单
  dictionaryFormData.key = row.key
  dictionaryFormData.value = row.value
  dictionaryFormData.description = row.description
}

// 删除数据字典
const deleteDictionary = (index) => {
  if (isTestAccount.value) {
    ElMessage.warning('测试账号不能进行此操作')
    return
  }
  
  dictionary.value.splice(index, 1)
        ElMessage.success('删除成功')
}

// 提交数据字典
const submitDictionary = async () => {
  if (isTestAccount.value) {
    ElMessage.warning('测试账号不能进行此操作')
    return
  }
  
  // 表单验证
  try {
    await dictionaryForm.value.validate()
    
    if (currentEditIndex.value === -1) {
      // 新增
      dictionary.value.push({
        key: dictionaryFormData.key,
        value: dictionaryFormData.value,
        description: dictionaryFormData.description
      })
      ElMessage.success('添加成功')
    } else {
      // 编辑
      dictionary.value[currentEditIndex.value] = {
        key: dictionaryFormData.key,
        value: dictionaryFormData.value,
        description: dictionaryFormData.description
      }
      ElMessage.success('更新成功')
    }
    
    // 关闭对话框
    dictionaryDialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败', error)
  }
}

// 初始化
onMounted(() => {
  // 这里可以从API获取配置数据
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-uploader {
  display: inline-flex;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.dictionary-add {
  margin-top: 20px;
  text-align: center;
}
</style> 